<!--
 * @Description: 接触网检测进度统计
 * @Author: Huang Junjie
 * @Date: 2021-06-01 14:54:35
 * @LastEditTime: 2021-06-29 17:06:47
 * @LastEditors: Huang Junjie
-->
<template>
  <div style="catenary-detection-progress-statistics-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="point-icon" />
        <span>接触网检修进度</span>
      </div>
      <!-- 标题栏 -->

      <!-- 列表 -->
      <!-- <el-scrollbar>
        <div class="content">
          <div class="inner-content">
            <div
              v-for="(item, index) in dataList"
              :key="`a${index}`"
              class="content-row">
              <div class="content-up">
                {{ item.name }}
                <div class="progress-num">
                  {{ '完成：' + item.value + '（总数：' + item.total + '） ' }}
                </div>
              </div>
              <div class="content-down">
                <el-progress class="progress-style" :stroke-width="14" :percentage="item.percentVlaue" />
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar> -->
      <!-- 列表 -->
      <!-- 接触网检测进度统计图表 -->
      <div
        id="ColumnChart02"
        class="echart01"
      />
      <!-- 接触网检测进度统计图表 -->
    </div>
  </div>
</template>

<script>
import { ColumnChart01 } from './common/js/EchartsModel';

// 引入echarts
const echarts = require('echarts');

export default {
  data() {
    return {
      // dataList: [
      //   { name: '怀化供电段', value: 0, total: 0, percentVlaue: 0 },
      //   { name: '长沙供电段', value: 0, total: 0, percentVlaue: 0 },
      //   { name: '衡阳供电段', value: 0, total: 0, percentVlaue: 0 },
      //   { name: '广州供电段', value: 0, total: 0, percentVlaue: 0 },
      //   { name: '深圳供电段', value: 0, total: 0, percentVlaue: 0 },
      //   { name: '海口综合维修段', value: 0, total: 0, percentVlaue: 0 }
      // ]
    };
  },
  mounted() {
    // setInterval(() => {
    //   this.dataList = [
    //     { name: '怀化供电段', value: 197.793, total: 360, percentVlaue: 0 },
    //     { name: '长沙供电段', value: 197.793, total: 460, percentVlaue: 0 },
    //     { name: '衡阳供电段', value: 197.793, total: 369, percentVlaue: 0 },
    //     { name: '广州供电段', value: 197.793, total: 368, percentVlaue: 0 },
    //     { name: '深圳供电段', value: 197.793, total: 460, percentVlaue: 0 },
    //     { name: '海口综合维修段', value: 197.793, total: 650, percentVlaue: 0 }
    //   ]
    //   this.dataList.forEach((val, key) => {
    //     this.dataList[key].percentVlaue = parseFloat((val.value / val.total * 100).toFixed(2))
    //   })
    // }, 50)
    this.getColumnChart01(); // 加载接触网检测进度统计Echarts图表
  },
  methods: {
    // 加载接触网检测进度统计Echarts图表
    getColumnChart01() {
      const xAxisData = ['怀化供电段', '长沙供电段', '衡阳供电段', '广州供电段', '深圳供电段', '海口综合维修段']; // ['怀化供电段', '长沙供电段', '衡阳供电段', '广州供电段', '深圳供电段', '海口综合维修段']
      const data = []; // []
      const myChart = echarts.init(document.getElementById('ColumnChart02'));
      ColumnChart01(myChart, xAxisData, data); // 月度跳闸统计 - 柱状图
    }
  }
};
</script>

<style lang="scss" scoped>
.catenary-detection-progress-statistics-style {
  position: relative;
  color: white;
  height: 382px;
  width: 928px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      margin: 20px 16px 0 16px;
      padding-bottom: 16px;
      align-items: center;
      display: flex;
      border-bottom: 1px solid #0b62a3;
      .point-icon {
        background-color: #3695FF;
        height: 10px;
        width: 10px;
        margin: 0 10px 0 0;
      }
    }
    .echart01 {
      position: absolute;
      margin: 0 auto;
      top: 60px;
      right: 0;
      left: 0;
      bottom: 20px;
      width: 820px;
      // height: 380px;
    }
    .el-scrollbar {
      position: absolute;
      top: 65px;
      left: 0;
      right: 0;
      bottom: 3px;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .content {
      width: 100%;
      padding: 16px 16px 0 16px;
      overflow: hidden;
      .inner-content {
        .content-row {
          margin-bottom: 16px;
          .content-up {
            position: relative;
            margin-bottom: 5px;
            font-size: 14px;
            .progress-num {
              position: absolute;
              top: 0;
              right: 0;
              font-size: 14px;
            }
          }
          .content-down {
            ::v-deep .el-progress-bar {
              width: 400px;
            }
            .progress-style ::v-deep .el-progress-bar__inner {
              background-image: linear-gradient(to right,  #029fe4, #05ffe1);
            }
            ::v-deep .el-progress__text {
              width: 54px;
              text-align: right;
              margin-left: 20px;
              font-family: SimSun;
              color: #ffffff;
              font-size: 12px;
            }
            ::v-deep .el-progress-bar__outer {
              background-color: #1b2649;
            }
          }
        }
      }
    }
  }
}
</style>
